<template>
  <div class="leftCenterLine">
    <dv-loading style="color: aqua" v-if="loading">{{ $t('loading') }}</dv-loading>
    <div ref="app" class="echarts" v-else></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getWorkshopMonthList } from "@/api/index";
export default {
  data() {
    return {
      xdata: [],
      ydata1: [],
      ydata2: [],
      ydata3: [],
      loading: false,
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      myChart: "",
    };
  },

  methods: {
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    //获取日期
    getDatesRange() {
      let dates = [];
      let today = new Date();
      for (let i = 0; i < 30; i++) {
        let date = new Date(today);
        date.setDate(today.getDate() - i); // 设置为当前日期减去i天
        let day = date.getDate(); // 获取当月的日期
        let month = date.getMonth() + 1; // 获取当月月份，需要+1因为getMonth()返回的是从0开始的月份索引
        dates.unshift(`${month}-${day}`); // 将格式化的日期添加到数组前端
      }
      return dates;
    },
    getdata() {
      var timer = null;
      let that = this;
      var myChart = echarts.init(this.$refs.app);
      this.myChart = myChart;
      var option;
      let dataX = this.xdata;
      for (let i = 0; i < 30; i++) {
        this.ydata1.push(this.getRandomInt(75, 92));
        this.ydata2.push(this.getRandomInt(80, 96));
        this.ydata3.push(this.getRandomInt(76, 94));
      }

      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          // left: "right",
          right: "2%",
          top: "2%",
          // width: 90,
          // orient: "vertical",
          data: ["CNC", "CAM", "二工"],
          textStyle: {
            color: "white", // 设置图例文字颜色
            fontSize: 12, // 设置图例文字字体大小
          },
        },
        grid: {
          left: "1%",
          right: "2%",
          top: "16%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          // name: "日期",
          type: "category",
          boundaryGap: false,
          nameTextStyle: {
            color: "#a6cac9",
          },
          // data: this.xdata,
          data: this.getDatesRange(),
          axisLabel: {
            textStyle: {
              color: "white", // X轴字体颜色
              fontSize: 14, // X轴字体大小
            },
          },
        },
        yAxis: {
          name: this.$t('radio.yAxis.percentage'),
          type: "value",
          max: 100, //最大值
          min: 0, //最小值
          interval: 20, //间隔
          axisTick: {
            show: false,
          },
          nameTextStyle: {
            color: "#a6cac9",
          },
          axisLabel: {
            textStyle: {
              color: "white",
              fontSize: 14,
            },
          },
        },
        series: [
          {
            name: "CNC",
            type: "line",
            data: this.ydata2,
            lineStyle: {
              color: "#009dff", // 这里设置为红色
              width: 2, // 线条宽度
            },
          },
          {
            name: "CAM",
            type: "line",
            data: this.ydata1,
            lineStyle: {
              color: "#43FFF7", // 这里设置为红色
              width: 2, // 线条宽度
            },
          },
          {
            name: "二工",
            type: "line",
            data: this.ydata3,
            lineStyle: {
              color: "#FDFF09", // 这里设置为红色
              width: 2, // 线条宽度
            },
          },
        ],
        // 自动滚动
        dataZoom: [
          //滑动条
          {
            show: false, //是否显示滑动条
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 16, // 一次性展示5个。
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      timer = setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue == dataX.length - 1) {
          option.dataZoom[0].endValue = 16;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option, true);
      }, 6000);
      window.addEventListener("resize", () => {
        //使用resize监听方法
        that.screenWidth = document.body.clientWidth;
        window.screenWidth = that.screenWidth;
        that.screenHeight = document.body.clientHeight;
        window.screenHeight = that.screenHeight;
      });
      option && myChart.setOption(option);
    },
  },
  mounted() {
    // setInterval(() => {
    //   this.getrequests();
    // }, 3600000);
    // this.getrequests();

    this.$nextTick(() => {
      this.getdata();
    });
  },
  watch: {
    screenWidth() {
      this.myChart.resize();
    },
    screenHeight() {
      this.myChart.resize();
    },
  },
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 38vh;
}
</style>
